<style lang="sass" scoped>
	#liyuanIndex{
		display: flex;	
		height: 100%;
		flex-direction: column;
		.banner{
			width: 100%;
			height: auto;
			min-height: 5rem;
			img{
				display: block;
				min-height: 5rem;
				height: auto;
				width: 100%;
				
			}
		}	
		.content{
			width: 100%;
			position: relative;
			flex:1;
			padding: 0 1rem;
			/*display: -webkit-box;
			-webkit-box-align: center;*/
			padding-top: 0rem;
			.title{
				width: 100%;
				height: 5rem;
				line-height: 5rem;
				text-align: center;
				font-size: 1.5rem;
				font-weight: 600;
			}
			.searchBox{
				width: 100%;
				height: 4rem;
				display: flex;
				position: relative;
				border-radius: 0.5rem;
				border:1px solid #ccc;	
				position: relative;
				input.importInput{
					flex: 1;
					height: 100%;
					line-height: 4rem;
					padding-left: 1rem;
					font-size: 1.3rem;
					display: block;
				}	
				span:first-child{
					width: 4rem;
					height: 100%;
					line-height: 4rem;
					display: block;
					color: #999;
					text-align: center;
					font-size: 2.4rem;
					position: relative;
					overflow: hidden;
				}
				span:last-child{
					width: 8rem;
					height: 100%;
					line-height: 4rem;
					display: block;
					color: #fff;
					text-align: center;
					background: #1973BF;
					border-radius: 0.5rem;
					font-size: 1.3rem;
					
				}		
			}
			.mallDetailBox{			
				display: flex;
				position: relative;		
				width: 100%;
				height: 4rem;
				padding:0 4rem;	
				.mallDetailBox_left{
					flex: 1;
					height: 100%;
					line-height: 4rem;
					position:relative;
					span{
						display: block;
						height: 1px;
						width: 100%;
						background: #ccc;
						position:absolute;
						left: 0rem;
						top: 50%;
					}
				}
				.mallDetailBox_msg{
					width: 4rem;
					height: 100%;
					text-align: center;
					color: #999;
					font-size: 1.2rem;
					line-height: 4rem;
				}						
			}
			.selectBsmBtn{
				width: 100%;
				height: 4rem;
				line-height: 4rem;
				border-radius: 0.5rem;
				text-align: center;	
				font-size: 1.3rem;
				background: #fff;
				border: 1px solid #1973bf;
				i{
					font-size: 1.5rem;
					display: inline-block;
					transform: rotate(270deg);
					color: #999;
					margin-left: 1rem;
					-webkit-transform: rotate(270deg);
				}
				i.icon-che{
					font-size: 1.5rem;
					display: inline-block;
					transform: rotate(0deg);
					color: #1973bf;
					margin-left: 1rem;
					-webkit-transform: rotate(0deg);
				}
				span{
					color: #1973bf;
				}
				i.icon-xiajiantou{
					position: absolute;
					right: 2rem;
				}
			}
		}	
		.hint{
			width: 100%;
			height: 5rem;
			line-height: 5rem;
			text-align: center;
			color: #F20000;
			font-size: 1.2rem;
			font-weight: 600;
		}
		.identityShade,.vinOcr_Content{
						
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			z-index: 10;
			display:flex;
			padding: 0 5%;
			background: rgba(0, 0, 0, 0.6);
			-webkit-box-align: center;	
			align-items: center;		
			font-family: "microsoft yahei";
			.msgBg{
				width: 94%;
				height: auto;
				margin: 0 auto;
				background: url('../images/bg.png') no-repeat center;
				background-size: 100% 100%;
				padding:5rem 1rem 2rem 1rem;
				dl{
					display:flex;
					margin-bottom: 1rem;
					dt{
						position:relative;
						width: 1rem;
						height: 2rem;
						margin-right: 0.5rem;
						span{
							position: absolute;
							left: 0rem;
							width: 1rem;							
							height: 1rem;
							top:0.3rem;
							border-radius: 50%;
							background: #1973bf;
						}
					}
					dd{
						flex: 1;
						color: #1973BF;
						font-size:1.2rem;
						line-height: 1.5rem;
					}
				}
				.shadeBtn{
					width: 100%;
					flex: 1;
					-webkit-box-align: center;
					text-align: center;
					span{
						width: auto;
						height: 3rem;
						background: #1973BF;
						display:block;
						text-align: center;
						font-size: 1.3rem;
						line-height: 3rem;
						color: #fff;
						padding: 0 4rem;
						margin: 1rem auto 0;
						border-radius: 1.5rem;
						font-weight: 600;
						letter-spacing:2px;
					}
				}
			}
		}
		
		.shadeAnimation-transition {
			opacity: 1;
			transition: opacity .5s;
		}
		
		.shadeAnimation-enter,
		.shadeAnimation-leave { 
			opacity: 0;
		}
		.cameraINput{
			opacity: 0;
			position: relative;
			width: 4rem;			
		    height: 100%;
		    line-height: 4rem;
		    display: block;
		    color: #999;
		    left: 0rem;
		    top: 0rem;
		    text-align: center;
		    font-size: 2.4rem;		   
    		top: -4rem;
		}
	}
	.vinInfo{
		width: 100%;
		height: auto;
		background: #fff;
		border-radius: 0.3rem;
		display: flex;
		flex-direction: column;
		div{
			width: 100%;
			height: 3rem;
			line-height: 3rem;
			text-align: center;
			font-size: 1.2rem;
			flex: 1;
			border-bottom: 1px solid #e5e5e5;
		}
		div:first-child{
			color: #666;
		}
		div:last-child{
			border-bottom: none;
		}
	}
	.charge-box{
		width: 95%;
		height: 12rem;
		background: #fff;
		border-radius: 3px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		border: 1px solid #f0f0f0;
		.charge-box__tit{
			width: 100%;
			height: 3rem;
			color: #333;
			line-height: 4rem;
			text-align: center;
			font-size: 1.8rem;
		}
		.charge-box__con{
			flex: 1;
			display: flex;
			color: #999;
			font-size: 1.5rem;
			align-items: center;
			justify-content: center;
		}
		.charge-box__btn{
			height: 4rem;
			text-align: center;
			color: #1973BF;
			line-height: 4rem;
			font-size: 1.8rem;
			border-top: 1px solid #f0f0f0;
		}
	}
	 
	
	
	
</style>
<template>
	<div id="liyuanIndex">
		<!--banner-->
		<div class="banner" v-if="abArray.length>0">
			<img :src="abArray[0].pic"/>
		</div>
		<!--主题内容-->
		<div class="content">
			<div class="title" v-if="vinBtnFlag">请输入车型信息</div>
			<!--<div class="mallDetailBox" v-if="bsmBtnFlag">
				<div class="mallDetailBox_left">
					<span></span>
				</div>
				<div class="mallDetailBox_msg">请选择车型</div>
				<div class="mallDetailBox_left">
					<span></span>
				</div>
			</div>-->
			<div class="selectBsmBtn"  v-touch:tap="goModelSelect">
				<i class="iconfont icon-che"></i>
				<span>点击选择车型</span>
				<i class="iconfont icon-xiajiantou"></i>
			</div>
			<div class="mallDetailBox" v-if="vinBtnFlag">
				<div class="mallDetailBox_left">
					<span></span>
				</div>
				<div class="mallDetailBox_msg">或</div>
				<div class="mallDetailBox_left">
					<span></span>
				</div>
			</div>
			<!--v-if="vinBtnFlag"-->
			<div class="searchBox">
				<!--<input type="file" accept="image/*" multiple>-->
				<span class="iconfont icon-zhaopian">
					<input 
					class="cameraINput"
					v-if="getNavigatorFlag == 1"					 
					type="file"  					 
					@change="uploadImg($event)" 
					accept="image/*" 
					capture="camera" 
					multiple
					/>
				<input 
					 class="cameraINput"
					 v-if="getNavigatorFlag == 2"					
					 type="file"  					  
					 @change="uploadImg($event)" 
					 accept="image/*"
					 size="1"
					 />
				</span>	
				
				<input type="text" class="importInput" placeholder="输入17位车架号智能匹配"  v-model="searchTxt" maxlength="17"/>
				<span v-touch:tap="goModelDetail">下一步</span>
			</div>
			<div class="hint">温馨提示:查询结果仅供参考</div>
			
		</div>
		<!--提示-->
		<tips></tips>
		<!--加载-->
		<!--<loading v-if="getLoading.show"></loading>-->
		<!--声明-->
		<div class="identityShade"  v-if="identityShade" transition="shadeAnimation">
			<div class="msgBg">
				<dl>
					<dt>
						<span></span>
					</dt>
					<dd>
						<span>该查询功能数据信息为人工整理，不排除个别错误的可能性，查询结果仅供参考。</span>
					</dd>
				</dl>
				<dl>
					<dt>
						<span></span>
					</dt>
					<dd>
						<span>我们支持用户纠错，如查询结果与实际车型不符，可致电联系。</span>
					</dd>
				</dl>
				<dl>
					<dt>
						<span></span>
					</dt>
					<dd>
						<span>我司本着方便用户、服务用户的原则开发本软件,该查询功能不作为任何纠纷和法律裁定的判定依据，我司不承担任何可能出现的法律及赔偿责任，望用户谅解。</span>
					</dd>
				</dl>
				<div class="shadeBtn">
					<span v-touch:tap="sureMsg">同意并继续使用</span>
				</div>
			</div>
		</div>
		<div class="identityShade" v-if="chargeShow">
			<div class="charge-box">
				<div class="charge-box__tit">提示</div>
				<div class="charge-box__con">车架号查询次数已经用完请及时充值</div>
				<div class="charge-box__btn" @click="callPhoneFn">通知充值</div>
			</div>
		</div>
		<div class="vinOcr_Content" v-if="vinArray && vinArray.length > 1 && vinFlag">
			<div class="vinInfo">
				<div>识别以下车架号</div>
				<div class="textOverflow_1" track-by="$index" v-for="item in vinArray" v-touch:tap="setVin(item)">{{item}}</div>				
			</div>
		</div>
		<!--vin首付弹窗提示-->
		<!--<div class="charge-box"></div>-->
	</div>
	
</template>

<script>
	// mapulifu 高级商家
	import axios from 'axios'

	var tipsAction = require("HQ_Actions").tips,
		tipsGetter = require("HQ_Getters").tips,
		loadingAction = require("HQ_Actions").loading,
		loadingGetter = require("HQ_Getters").loading;
	var HQ_Actions = frameScript.extend({}, [tipsAction, loadingAction], true),
		HQ_Getters = frameScript.extend({}, [tipsGetter, loadingGetter], true);
	import { swiper, swiperSlide} from 'vue-awesome-swiper';	
	module.exports={
		init:function(){
			HQ_CALLBACK.liyuanIndex = {};
		},
		ready:function(){

			this.setLoading({'show':true})	
			//获取当前sessionStorage			
			let session = sessionStorage.getItem('indexLocalStorage');			
			if(!session){				
				this.$set('identityShade',true);
				setTimeout(function(){
					if(this.identityShade){
						
						sessionStorage.setItem('indexLocalStorage','true');
					}
					
				}.bind(this),2000)
			}
			//根据当前url compId 来判断当前是那个公司	
			console.log(window.location.search)
			let targetCompany = window.location.search.split('=')[1];
			//let targetCompany = ;			
			//4  赛魔公司
			//document.title=name.title;	
			
			HQ.callProductApi('fontpage',{'compCode':targetCompany},this.getIndexCallBack);
			this.getNavigator();
		},
		watch:{
			
		},
		data:function(){			
	
			return{
				searchTxt:'',
				abArray:[],
				swiperOption: {
		        	// 如果你后续需要找到当前实例化后的swiper对象以对其进行一些操作的话，可以自定义配置一个名字
			        name: 'currentSwiper',
			        // 所有配置均为可选（同Swiper配置）
			        setWrapperSize :true,
			        autoHeight: false,
			        pagination : '.swiper-pagination',
			        paginationClickable :true,
			        prevButton:'.swiper-button-prev',
			        nextButton:'.swiper-button-next',
			        loop:true,
			        autoplay:3000,			        
			        autoplayDisableOnInteraction : false,
			        onTransitionStart(swiper){
			        	self.selectImgIndex = swiper.realIndex;
			        }
			    },
			    identityShade:false,
			    vinBtnFlag:false,
			    bsmBtnFlag:false,
			    getNavigatorFlag:1, //安卓 2 IOS
			    loadImg:false,
			    vinArray:null,
			    vinFlag:false,
			    chargeShow: false,
			    models: null
			    
			}
			
		},
		methods:{
			
			callPhoneFn() {
				//window.location.href = '15876586297'
				this.chargeShow = false
				window.location.href='tel:15876586297';
				
			},
			// 识别车架号 
			setVin(vin) {
				this.searchTxt = vin;
				this.vinFlag = false;
			},
			closeLayer(){
				this.layerShow = false
				this.$set('layerShow',false)
			},
			// 上传图片
			uploadImg(e) {
				if(!this.loadImg){
					let _this = this,
						fs = e.target.files;
						// 判断当前上传的是否是图片											
						if(fs[0].type.indexOf('image') != -1) {
							let fd = new FileReader()
								fd.readAsDataURL(fs[0])
							fd.onload = function(){
						      	var img = new Image()
						      	img.src = this.result
						      	img.onload = function(){	
						      		var imgData = frameScript.compress(img);
//						      		_this.formPictures(imgData)
									console.log(fs[0])
									_this.formPictures(fs[0])
						      		e.target.value = ''
						      	}
							}
						}else{
							this.showTips({
								content:'请输入正确的17位VIN号',
								closeTimeout:1000
							});
						}
					
				}else{
					e.preventDefault();
					this.showTips({
						content:'图片上传中,请稍后...'
					});
				}
			},
			
			// 上传图片到服务器
			formPictures(file) {
				this.setLoading({'show':true})	
				console.log(file)
				var formData = new FormData(),
					_this = this;
	        		formData.append('file',file)
			  		//formData.append('type','base64')
			  
				  	console.log(formData)
				  	this.load = true;
				  	frameScript.ajax({
			  		method: "POST",
			  		url: HQ_NETWORK.API_SERVER_PRODUCT + "upload_file",
			  		data:formData,
			  		success(data){
			  			console.log(data);
			  			if(data.number == 200){
			  				// 上传成功后再调用车架号识别vin
			  				if(data.result.url){
			  					HQ.callProductApi('VinOCR',{'pic':data.result.url},_this.getVinCallBack);
			  				}else{
			  					_this.setLoading({'show':false})	
			  					_this.showTips({
					  				content:data.message
					  			});
			  				}
			  							  				
			  			}
			  			_this.load = false;
			  		},error(){
			  			_this.setLoading({'show':false})	
			  			_this.showTips({
			  				content:data.message
			  			});
			  			
			  		}
			  	});
			  	
			},
			getVinCallBack(data) {
				this.setLoading({'show':false})	
				console.log(data);
				if(data.number == 200){
					if(data.result.match && data.result.match.length > 0){
						if(data.result.match.length == 1){
							this.searchTxt = data.result.match[0]
						}else{							
							this.$set('vinArray', data.result.match)
							this.vinFlag = true							
						}
					}else{													
						this.showTips({
			  				content:'抱歉！没有匹配到车架号'
			  			});
			  			
					}
				}else{
					this.showTips({
		  				content:data.message
		  			});
				}
			},
			
			//	判断当前是安卓还是IOS 
			getNavigator() {
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
					isAndroid ? this.getNavigatorFlag = 1 : this.getNavigatorFlag = 2;
			},
			sureMsg:function(){
				this.identityShade = false;
			},
			getIndexCallBack:function(data){
				
				if(data.number == 200){
				
					var data = data.result;					
					document.title = data.comp_name+'油品查询系统';
					
					if(data.show_vin){
						this.$set('vinBtnFlag',true);
					}else{
						this.$set('vinBtnFlag',false);
					}
					if(data.show_model){
						this.$set('bsmBtnFlag',true);
					}else{
						this.$set('bsmBtnFlag',false);
					}
					for(let  i = 0;i<data.ad.length;i++){
						this.abArray.push(data.ad[i])
					}
					
				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
				
				this.setLoading({'show':false})		
			},			
			goModelDetail:function(){
				if(this.searchTxt.length != 17){
					this.showTips({
						content:'请输入正确的17位VIN号',
						closeTimeout:2000
					});
					return ;
				}else{
					this.setLoading({'show':true})
					axios.get('http://118.31.19.251:9001/vin/query/?merchantId=52&userAccountId=-1&vin='+this.searchTxt).then(res => {
						console.log(res)
						if(res.status === 200){
							switch(res.data.status) {
								case 0:
									this.models = res.data.data.models
									HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelDetail?searchTxt="+this.searchTxt+'&models='+JSON.stringify(this.models))
								break;
								case -1:
									this.chargeShow = true
								break;
								
							}
						}
						
					})
					//HQ.callProductApi('get_info_by_vin',{'vin':this.searchTxt},this.vinCallBackFn);
					
					
				}				
			},
			vinCallBackFn:function(data){
				this.setLoading({'show':false})
				if(data.number == 200){
			
					HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelDetail?searchTxt="+this.searchTxt+'')

				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
			},
			goModelSelect:function(){
				var local = window.localStorage.getItem('modelParam');
				if(local != null){
					window.localStorage.removeItem('modelParam');
				}
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelSelect");
			}
		},
		
		components:{
			swiper,
			swiperSlide,
			tips:require("../../components/tips/tips.vue"),	
			loading:require("../../components/loading/loading.vue")	
		},
		vuex: {
			actions: HQ_Actions,
			getters: HQ_Getters
			
		},
		
		//不再当前页就销毁当前对象下的方法
		beforeDestroy: function() {
			delete HQ_CALLBACK.liyuanIndex;
		}
	}
</script>